window.onload = function(){

    deleteBox();
}

function deleteBox(){
    var win = document.querySelector('.jd_win');//获取弹出框 全屏的
    var deleteButton = document.querySelectorAll('.delete_box ');//获取垃圾桶的父盒子
    var winBox = document.querySelector('.jd_win_box ');//获取弹出框 小的
    var btnBox = document.querySelector('.button_box');//获取取消按钮的父盒子
    var cancelBtn = btnBox.querySelector('a:first-child');//取消按钮
    console.log(deleteButton);
    console.log(win);

    var deleteBox = null; //定义全局变量 垃圾桶的父盒子用到的
    //给垃圾桶绑定点击事件 就是点击垃圾桶父盒子 垃圾桶父盒子其实是伪数组 所以需要遍历
    for(var i = 0; i < deleteButton.length; i++){
        deleteButton[i].onclick = function(){

            //点击垃圾桶 两个弹出框都出来 并且垃圾桶上面的盖子缓慢发生30度的旋转 旋转点是以左上角
            win.style.display = "block";
            winBox.className = "jd_win_box bounceInDown"; //给该元素添加类名 让其产生动画效果
            deleteBox = this; //当前所点击到的垃圾桶父盒子 赋值
            //获取当前所点击到的盒子里面的第一个span 垃圾桶的盖子
            var deleteUp = deleteBox.querySelector('span:first-child');
            deleteUp.style.transform = "rotate(-30deg) translateY(2px)";  //让盖子旋转
            deleteUp.style.webkitTransform = "rotate(-30deg) translateY(2px)";
            //添加旋转时的过渡效果
            deleteUp.style.transition = "all 1s";
            deleteUp.style.webkitTransition = "all 1s";
            //添加旋转的圆点
            deleteUp.style.transformOrigin = "0 5px";
            deleteUp.style.webkitTransformOrigin = "0 5px";

        }
        //点击取消按钮 隐藏弹出框 垃圾桶盖子还原
        cancelBtn.onclick = function(){
            win.style.display = "none";
            var deleteUp = deleteBox.querySelector('span:first-child');
            deleteUp.style.transform = "none";
            deleteUp.style.webkitTransform = "none";
        }
    }
}